<template>
  <div>

    <div class="i_bg">
      <div class="content mar_20">
        <img src="@/assets/images/img3.jpg" />
      </div>

      <!--Begin 第三步：提交订单 Begin -->
      <div class="content mar_20">

        <!--Begin 支付宝支付 Begin -->
        <div class="warning">
          <table border="0" style="width:1000px; text-align:center;" cellspacing="0" cellpadding="0">
            <tr height="35">
              <td style="font-size:18px;">
                感谢您在本店购物！您的订单已提交成功，请记住您的订单号: <font color="#ff4e00">{{ order.serialNumber }}</font>
              </td>
            </tr>
            <tr>
              <td style="font-size:14px; font-family:'宋体'; padding:10px 0 20px 0; ">
                <!-- 您选定的配送方式为: <font color="#ff4e00">申通快递</font>； &nbsp; &nbsp;您选定的支付方式为: <font color="#ff4e00">银行卡</font>； -->
                您的应付款金额为: <font color="#ff4e00">￥{{ order.cost }}</font>
              </td>
            </tr>
            <!-- <tr>
              <td style="padding:20px 0 30px 0; font-family:'宋体';">  
                支付宝网站(www.alipay.com) 是国内先进的网上支付平台。<br />
                支付宝收款接口：在线即可开通，零预付，免年费，单笔阶梯费率，无流量限制。<br />
                <a href="#" style="color:#ff4e00;">立即在线申请</a>
              </td>
            </tr> -->
            <tr>
              <td>
                <span><button class="pay-btn" @click="openChannelDialog(order.id)">去支付</button></span>
                <a href="#" @click.prevent="toIndex()">首页</a> &nbsp; &nbsp; <a href="#"
                  @click.prevent="toUser()">用户中心</a>
              </td>
            </tr>
          </table>
        </div>

        <!-- 支付通道选择弹窗 -->
        <el-dialog title="请选择支付方式" :visible.sync="payDialogVisible" width="320px" center :close-on-click-modal="false">
          <div style="text-align:center;">
            <el-button type="success" icon="el-icon-check" @click="choosePay('wx')">微信支付</el-button>
            <el-button type="primary" icon="el-icon-check" @click="choosePay('zfb')">支付宝支付</el-button>
          </div>
        </el-dialog>

        <!-- 微信支付二维码弹窗 -->
        <el-dialog title="微信扫码支付" :visible.sync="wxQrcodeVisible" width="260px" center @close="wxQrcode = ''">
          <div style="text-align:center">
            <qrcode-vue :value="wxQrcode" :size="200" level="H" />
            <p style="margin-top:10px;color:#999;">请使用微信扫一扫完成支付</p>
          </div>
        </el-dialog>

        <!--Begin 余额不足 Begin -->
        <!-- <div class="warning" v-show="warningShow">
          <table border="0" style="width:1000px; text-align:center;" cellspacing="0" cellpadding="0">
            <tr>
              <td>
                <p style="font-size:22px;">提示 !</p>
                <b style="color:#ff4e00; font-size:16px; font-family:'宋体';">您的余额不足以支付整个订单，请选择其他支付方式</b>
                <div class="backs"><a href="#" @click.prevent="toBuyCarTwo()">返回上一页</a></div>
              </td>
            </tr>
          </table>
        </div> -->
        <!--Begin 余额不足 Begin -->

      </div>
    </div>

  </div>
</template>

<script>
import { mapMutations } from 'vuex'
export default {

  name: 'BuyCarThreeView',
  data() {
    return {
      warningShow: false,
      userId: '',
      order: '',
      orderId: 0,
      payDialogVisible: false,   // 通道选择窗
      wxQrcodeVisible: false,    // 微信二维码窗
      wxQrcode: '',              // 微信二维码内容
      currentOrderId: ''         // 当前要支付的订单 id
    }
  },
  methods: {
    ...mapMutations(['setShowPage']),
    toBuyCarTwo() {
      this.$router.push('/buycarTwo')
    },
    toIndex() {
      this.$router.push('/')
    },
    toUser() {
      this.$router.push('/user')
    },
    getOrder() {
      this.$axios({
        url: 'selectOrderById',
        params: { id: this.orderId }
      }).then(rs => {
        if (rs.data.code == 5200 || rs.data.code == '5200') {
          this.order = rs.data.order
        }
      })
    },
    openChannelDialog(orderId) {
      this.currentOrderId = orderId
      this.payDialogVisible = true
    },
    /* 2. 用户选了支付通道 */
    choosePay(channel) {
      this.payDialogVisible = false
      if (channel === 'zfb') {
        this.toZfbPay(this.currentOrderId)   // 走原来支付宝逻辑
      } else {
        this.toWxPay(this.currentOrderId)    // 走微信逻辑
      }
    },
    toZfbPay(id) {
      this.$axios.get(`/ali/payByZfb/${id}`).then(rs => {
        console.log("支付信息" + rs)
        this.handlegotoPay(rs.data)
      })
    },
    toWxPay(id) {
      this.$axios.get(`/ali/payByWX/${id}`).then(rs => {
        const payUrl = rs.data.pay_url;
        if (payUrl) {
          this.wxQrcode = payUrl;        // 设置二维码内容
          this.wxQrcodeVisible = true;   // 打开弹窗
        } else {
          this.$message.error('获取微信支付二维码失败');
        }
      })
    },
    handlegotoPay(data) {
      const formHtml = data;
      const tempDiv = document.createElement('div');
      tempDiv.innerHTML = formHtml;
      document.body.appendChild(tempDiv);

      const payForm = tempDiv.querySelector('form[name="punchout_form"]');
      if (!payForm) {
        document.body.removeChild(tempDiv); // 清理DOM
        throw new Error("支付表单不存在，无法发起支付");
      }

      payForm.submit();

      setTimeout(() => {
        if (document.body.contains(tempDiv)) {
          document.body.removeChild(tempDiv);
        }
      }, 1000);
    }
  },
  mounted() {
    this.setShowPage(0)
    this.userId = window.sessionStorage.getItem('userId')
    this.orderId = Number(this.$route.query.orderId) || 0
    this.getOrder()
  }
}
</script>

<style scoped>
/* 支付按钮样式 */
.pay-btn {
  background-color: #ff4e00;
  color: white;
  border: none;
  padding: 5px 10px;
  border-radius: 3px;
  cursor: pointer;
}
</style>